<template>
  <view>
    <view>
      <view>
        <view class="cate-1">
          <view class="cate-title">
            <view><text class="cate-title-t1">{{cateItem.name}}</text></view>
          </view>
        </view>

        <view class="cate-2" v-for="(itemx, x) in cateItem.childs" :key="x">
          <view class="cate-content">
            <view v-for="(itemy, y) in itemx" :key="y">
              <view class="cate-content-1" @click="gotoList(itemy)">
                <image :src="itemy.imgUrl"></image>
                <view class="cate-content-title">{{itemy.name}}</view>
                <view class="cate-content-num">{{itemy.count}}+</view>
              </view>
            </view>
          </view>
        </view>

      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        cateItem: {},
      };
    },
    onLoad(options) {
      var that = this;
      that.$data.cateItem = JSON.parse(options.item)

      // 拆分孩子列表，每两个组成一组
      var list = [];
      var childs = that.$data.cateItem.childs;
      var listitem = [];
      var temp = 0;
      for (var i = 0, len = childs.length; i < len; i++) {
        temp = temp + 1;
        var child = childs[i];
        listitem.push(child);
        if (temp == 2) {
          var obj = JSON.parse(JSON.stringify(listitem));
          list.push(obj);
          listitem = [];
          temp = 0;
        }
      }
      if (listitem.length > 0) {
        var temp = {};
        listitem.push(temp);
        var obj = JSON.parse(JSON.stringify(listitem));
        list.push(obj);
      }

      that.$data.cateItem.childs = list;

    },
    methods: {
      // 跳转列表页面
      gotoList(item) {
        var cateid = item.id;
        // 调用API页面跳转
        uni.navigateTo({
          // 指定详情页面的 URL 地址，并传递 goods_id 参数
          url: '/pages/list/list?cateId=' + cateid
        })
      },
    }
  }
</script>

<style lang="scss">
  .cate-1 {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .cate-title {
    width: 686rpx;
    height: 112rpx;
    display: flex;
    align-items: center;
  }

  .cate-title view {
    width: 343rpx;
  }

  .cate-title-t1 {
    font-size: 28rpx;
    color: #808080;
  }

  .cate-title-t2 {
    font-size: 24rpx;
    color: #808080;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }

  .cate-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .cate-content image {
    display: block;
    width: 326rpx;
    height: 164rpx;
  }

  .cate-content-1 {
    display: flex;
    position: relative;
  }

  .cate-title-t1 image {
    position: absolute;
  }

  .cate-content-title {
    position: absolute;
    top: 30rpx;
    left: 40rpx;
    font-size: 32rpx;
    color: #FFFFFF;
  }

  .cate-content-num {
    position: absolute;
    top: 90rpx;
    left: 40rpx;
    font-size: 32rpx;
    color: #FFFFFF;
  }
</style>